<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../../taglib.jsp" %>
<html>
<head>
    <title>千寻</title>

</head>
<body id="page">
    <form class="layui-form">
        <div style="margin-left: 20px;">
            <%--<shiro:hasPermission name="/uploadFile.do">
                <input type="file" name="myFile" class="layui-upload-file">
            </shiro:hasPermission>--%>
                <input type="file" name="myFile" class="layui-upload-file" />
        </div>
        <table class="layui-table">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>存放路径</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${userImageEntities}" var="item">
                    <tr class="gradeX">
                        <td style="text-align: center;">${item.id}</td>
                        <td style="text-align: center;">${item.imageName}</td>
                        <td style="text-align: center;">${item.imagePath}</td>
                        <td style="text-align: center;"><a href="javascript:void (0);" onclick="showImage('${item.id}','${item.imageName}');" class="layui-btn layui-btn-mini">查看大图</a></td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
        <div id="demo1"></div>
    </form>
<script type="text/javascript">
    layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage
                , layer = layui.layer;
        //调用分页
        laypage({
            cont: 'demo1'
            ,pages: Math.ceil(${pageInfo.total}) //得到总页数
            ,curr : ${pageInfo.pageNo}
            ,skin : '#009688'
            ,jump: function(obj,first){
                var curr = '${pageInfo.pageNo}';
                if(first == true){

                }else{
                    curr = obj.curr;
                    $('#page').load('${path}/test/toImage.do?pageNo='+curr);
                }
            }
        });
    });
    function showImage(id,name) {
        layer.photos({
            photos: {
                "title": "狗狗照片", //相册标题
                "id": id, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": [   //相册包含的图片，数组格式
                    {
                        "alt": name,
                        "pid": id, //图片id
                        "src": "${imgpath}"+name, //原图地址
                    }
                ]
            }
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    }
    layui.upload({
        url: '${path}/uploadFile.do'
        ,success: function(res) {   //上传成功返回值，必须为json格式
            if(res.result=='success'){
                //配置一个透明的询问框
                layer.msg('您的图片已上传成功,可在尾页进行查看!', {
                    time: 20000, //20s后自动关闭
                    btn: ['关闭']
                });
            }
        }
    });
</script>
</body>
</html>
